<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../css/responsive.css?v=2025">
    <link rel="stylesheet" href="../../element/theme-default/index.css">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">-->
    <script type="text/javascript">
        document.write("<link rel='stylesheet' href='../../css/index.css?v=" + Math.random() + "'>");
    </script>
    <script src="../../js/jquery-1.11.3.min.js"></script>
	<script src="../../js/datetime.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../element/index.js"></script>
    <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <!--[if lt IE 9]>
    <script src="../js/html5shiv.min.js"></script>
    <script src="../js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="wrap" >
    <div class="add_box">
        <span>行程详情验证检测</span>
    </div>
	<div class="search_box">
		<!--检索部分-->
		<el-form :inline="true"  :model="navForm" class="demo-form-inline">
			<el-form-item label="设备编号:">
				<el-input v-model="navForm.search" placeholder="请输入设备编号" clearable></el-input>
			</el-form-item>
			<el-form-item label="行驶时间:" class="dateBox">
			    <el-col :span="11">
			        <el-date-picker
			                placeholder="请选择日期"
			                v-model="navForm.startTime"
			                type="date"
			                value-format="yyyy-MM-dd"
			                style="width: 100%;">
			        </el-date-picker>
			    </el-col>
			    <el-col class="line" style="text-align: center;" :span="2">至</el-col>
			    <el-col :span="11">
			        <el-date-picker
			                placeholder="请选择日期"
			                v-model="navForm.endTime"
			                type="date"
			                value-format="yyyy-MM-dd"
			                style="width: 100%;">
			        </el-date-picker>
			    </el-col>
			</el-form-item>
			<el-form-item>
				<el-button-group>
				  <el-button type="success" size="small" @click="selectDate('today')">今天</el-button>
				  <el-button type="success" size="small" @click="selectDate('7')" >近一周</el-button>
				  <el-button type="success" size="small" @click="selectDate('30')" >近一月</el-button>
				</el-button-group>
				<el-button type="primary" @click="searchTable" style="margin-left: 0.2rem;">查询</el-button>
			</el-form-item>
			<el-form-item label="里程大于(km):">
				<el-input v-model="navForm.mileage" placeholder="请输入里程" clearable></el-input>
			</el-form-item>
			<el-form-item label="时长大于(h):">
				<el-input v-model="navForm.duration" placeholder="请输入时长" clearable></el-input>
			</el-form-item>
		</el-form>
	</div>
	<!-- <div id="deviceInfo">
		总行程数量：<span>{{tripVo.tripCount}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
		行驶总时长：<span>{{tripVo.tripDuration}}</span><br />
		总gps数量：<span>{{tripVo.gpsCount}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
		总有速度的gps数量：<span>{{tripVo.validGpsCount}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
		行程外gps数量：<span>{{tripVo.notTripGpsCount}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
		行程外有速度的gps数量：<span>{{tripVo.notTripValidGpsCount}}</span>
	</div> -->
    <div class="table_box">
        <!--table表格部分-->
        <el-table
                ref="multipleTable"
                :data="tableData"
                style="width: 100%"
                >
			<el-table-column prop="deviceNumber" label="设备编号" ></el-table-column>
			<el-table-column prop="startTime" label="开始时间" ></el-table-column>
			<el-table-column prop="endTime" label="结束时间" ></el-table-column>
			<el-table-column prop="duration" label="时长(min)" ></el-table-column>
			<el-table-column prop="mileage" label="根据mileage计算距离(km)" ></el-table-column>
			<el-table-column prop="gpsCount" label="有速度gps个数" ></el-table-column>
			<el-table-column prop="mark" label="前后30min是否有行程" ></el-table-column>
			<el-table-column label="GPS" >
				<template slot-scope="scope">
				    <el-button size="mini" type="primary" @click="openNewPage(scope.row)">回放</el-button>
				</template>
			</el-table-column>
        </el-table>
        <!--分页部分-->
        <el-pagination
                style="margin-top:0.2rem;"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page="currentPage"
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[10, 20]"
                :page-size="10"
                :total="totalPage">
        </el-pagination>
    </div>
</div>
<!--<script src="../js/prototype.js?v=2229"></script>-->

<script type="text/javascript">
    document.write("<script type='text/javascript' src='../js/prototype.js?v=" + Math.random() + "'><\/script>");
</script>
<script>
    var myControl=new Vue({
        el:".wrap",
        data:{
			rid:'',
            fullscreenLoading:true,
			detailPageVisible:false,
			dialogTableVisible:false,
            formType:"",               //页面类型
            navForm:{           //储存搜索框的检索条件信息
                startTime:'',
                endTime:'',
                search:'',
				mileage:'',
				duration:'',
            },
			modeForm:{
				name:""
			},
			currentPage:1,      //当前页
			pageSize:10,      //一页多少条数据
			totalPage:1,         //总页数tableData:[],
            tableData:[],
			lossTrips:{
				deviceNumber:'',
				tripCount:'',
				tripDuration:'',
				gpsCount:'',
				validGpsCount:'',
				notTripGpsCount:'',
				notTripValidGpsCount:'',
			}
        },
        methods:{
            getData:function(){
                this.getTbodyData();
            },
			//选择日期
			selectDate(sign){
				const start = new Date();
				const end = new Date();
				if(sign=='today'){
					this.navForm.startTime=dateFormatting(start,'yyyy-MM-dd');
					this.navForm.endTime=dateFormatting(end,'yyyy-MM-dd');
				}else{
					this.navForm.startTime=dateFormatting(new Date(start.getTime() - 3600 * 1000 * 24 * sign),'yyyy-MM-dd');
					this.navForm.endTime=dateFormatting(end,'yyyy-MM-dd');
				}
			},
            //点击查询
            searchTable(){
                this.currentPage=1;
                this.getTbodyData();
            },
            //点击查看权限按钮
            openNewPage:function(row){
				window.open('../map-gps-mongo.html?plateNum='+row.deviceNumber+'&startTime='+row.startTime+'&endTime='+row.endTime);
            },
            //获取tbody里的数据
            getTbodyData:function(){
                var _this=this;
                _this.tableData=[];//  清空table的值
                var json={
						deviceNumber:this.navForm.search,
						startTime:this.navForm.startTime+' 00:00:00',
						endTime:this.navForm.endTime+' 23:59:59',
						pageNum:_this.currentPage,
						pageSize:_this.pageSize,
						mileage:this.navForm.mileage,
						duration:this.navForm.duration,
					};
                $.ajax({
                    type: 'post',   //POST/PUT/DELETE/HEAD...
                    url:"http://127.0.0.1:8088/tripGps/findExceptionTripsDetailView",
                    // beforeSend: function(request) { request.setRequestHeader("Authorization",serviceToken);  },
                    data:JSON.stringify(json),
                    dataType: 'json',	//text/script/xml/json/jsonp
                    contentType:"application/json; charset=UTF-8",
                    success: function (data) {
						$.each(data.data.list,function (key,val) {
							val.duration=Number(val.duration)/1000/60;
							val.duration=Math.ceil(val.duration);
							val.mileage=Math.ceil(Number(val.mileage)*100)/100;
							if(val.mark==0){
								val.mark="无";
							}else if(val.mark==1){
								val.mark="前有行程";
							}else if(val.mark==2){
								val.mark="后有行程";
							}else if(val.mark==3){
								val.mark="前后都有行程";
							}
						})
						// console.log(data.data.list);
                        _this.tableData=data.data.list;
                        _this.totalPage=parseInt(data.data.total);
                    }
                });
            },
			getLossTrips:function (scope) {
				console.log(scope);
				this.lossTrips=scope.row.lossTrips;
				this.dialogTableVisible=true;
			},
            //分页数据多少条change
            handleSizeChange(val){
                this.pageSize=val;
                this.getTbodyData();
            },
            //分页：当前页改变之后的函数
            handleCurrentChange:function(val){
                // console.log(val);
                this.currentPage=Number(val);
                this.getTbodyData(this.activityState);
            },
        },
        mounted:function(){
            // this.getData();
        }
    });
    window.onstorage=function(e){
        // console.log(e.key);
        if(e.key=="orderState"){
            myControl.currentPage=1;
            myControl.getTbodyData();
        }
    };

</script>
</body>
</html>